<template>
	<view>
		<myInput></myInput>
		<view style="width: 23rem;height: 7rem;background-color: #fff;margin-left: 10px;">
			<view class="top" style="padding: 15px 0 35px 0;"><view class="text">新朋友</view><view class="image"><image src="../../static/17.jpg" mode=""></image></view></view>
			<view class="top"><view class="text">群通知</view><view class="image"><image src="../../static/17.jpg" mode=""></image></view></view>
		</view>
		<view style="width: 30rem;height: 1rem;background-color: #f2f2f6;"></view>
		<!--顶部导航栏-->
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"  show-scrollbar="false">
			<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view>
		</scroll-view>

		<!-- 内容 -->
		<swiper :current="navIndex" @change="tabChange" class="content">
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" avatar="../../static/fengjian.jpeg" badgePositon="left" title="风间" note="[Q我吧]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/nini.jpeg" badgePositon="left" title="妮妮" note="[手机在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/zhengnan.jpg" badgePositon="left" title="正南" note="[5G在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/adai.jpeg" badgePositon="left" title="阿呆" note="[电脑在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/xiaokui.jpeg" badgePositon="left" title="小葵" note="[iPhone在线]"></uni-list-chat>
				</uni-list>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" avatar="../../static/fengjian.jpeg" badgePositon="left" title="风间" note="[Q我吧]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/nini.jpeg" badgePositon="left" title="妮妮" note="[手机在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/zhengnan.jpg" badgePositon="left" title="正南" note="[5G在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/adai.jpeg" badgePositon="left" title="阿呆" note="[电脑在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/xiaokui.jpeg" badgePositon="left" title="小葵" note="[iPhone在线]"></uni-list-chat>
				</uni-list>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatarList="chunribufangweidui" badgePositon="left" title="春日部防卫队" note="春日部防卫队，出击！"></uni-list-chat>
					<uni-list-chat :avatarList="shuangyeyouzhiyuan" badgePositon="left" title="双叶幼稚园" note="这里是雙葉幼稚園哦!"></uni-list-chat>
				</uni-list>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<view style="position: relative;top:16rem;left: 5rem;">
					<view style="font-size: 18px;">暂无频道，去发现你喜欢的频道吧</view>
					<view style="text-align: center;color: #fff;width: 5rem;height: 2rem;background-color: #2098e4;border-radius: 5px;line-height: 35px;margin-left: 93px;margin-top: 10px;">去发现</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" avatar="../../static/xiaoQ.jpg" badgePositon="left" title="小Q"></uni-list-chat>
				</uni-list>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" avatar="../../static/mycon.png" badgePositon="left" title="我的电脑"  note="[在线]无需数据线,手机轻松传文件到电脑."></uni-list-chat>
				</uni-list>
			</swiper-item>
			<swiper-item class="swiper_item ">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" avatar="../../static/guangzhi.jpeg" badgePositon="left" title="野原广志" note="[电脑在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/meiya.jpeg" badgePositon="left" title="美伢" note="[4G在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/xiaokui.jpeg" badgePositon="left" title="小葵" note="[iPhone在线]"></uni-list-chat>
					<uni-list-chat :avatar-circle="true" avatar="../../static/xiaobai.jpeg" badgePositon="left" title="小白" note="[2G在线]"></uni-list-chat>
				</uni-list>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				navIndex: 0,
				tabBars: [{
					name: '好友',
					id: 'friend'
				}, {
					name: '分组',
					id: 'group'
				}, {
					name: '群聊',
					id: 'chat'
				}, {
					name: '频道',
					id: 'pindao'
				}, {
					name: '机器人',
					id: 'robot'
				}, {
					name: '设备',
					id: 'shebei'
				}, {
					name: '通讯录',
					id: 'address'
				}],
				chunribufangweidui:[
					{url:'../../static/xiaoxin.jpg'},
					{url:'../../static/fengjian.jpeg'},
					{url:'../../static/nini.jpeg'},
					{url:'../../static/zhengnan.jpg'},
					{url:'../../static/adai.jpeg'}
				],
				shuangyeyouzhiyuan:[
					{url:'../../static/yuanzhangxianzsheng.jpeg'},
					{url:'../../static/yuanzhangfuren.jpeg'},
					{url:'../../static/songbanlaoshi.jpg'},
					{url:'../../static/jiyonglaoshi.jpeg'},
					{url:'../../static/shangweilaoshi.jpeg'}									
				]
			}
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
				console.log(index)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//滑动切换swiper
			tabChange(e) {
				const navIndex = e.detail.current
				this.navIndex = navIndex
			},
		}
	}
</script>

<style scoped>
	.top{
		display: flex;
	}
	.text{
		font-size: 18px;
	}
	.image{
	position: relative;
    right: -18rem;
    top: 0.1rem;
	}
	.image image{
		text-align: right; 
		width: 1rem;
		height: 1rem;
	}
	.activite {
		color: #2098e4;
		border-bottom: 2px solid #2098e4;
	}
	.content {
		height: 700px;
		background-color: #fff;
		padding-top: 5px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		color: #252525;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 15%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 10px 0 2px 0;
		font-size: 32rpx;
	}
</style>
